<template>
	<div class="index">
		<br>
		<el-button @click="start()" class="btn" plain>{{tin}}</el-button>
		<h4>{{num}}</h4>
		<div class="box" v-show="show">
			<div v-for="i in size" :key="i">
				<div v-for="j in size" :key="j">
					<div :class="box[i*1000+j] ? 'box-card-open' : 'box-card-close'" @click="click(i*1000+j)">
						<div :class="npc[i*1000+j] ? 'npc-card-open' : 'npc-card-close'"></div>
					</div>
				</div>
			</div>
		</div>
		<br>
	</div>
</template>

<script>
	import axios from 'axios';
	import vueAxios from 'vue-axios';
	export default {
		data() {
			return {
				tin: '开始游戏',
				box: [],
				npc: [],
				show: true,
				size: 10,
				num: 0,
				status: 0,
				value: ''
			};
		},
		methods: {
			//随机数生成[n,m]
			randomNum(minNum, maxNum) {
				switch (arguments.length) {
					case 1:
						return parseInt(Math.random() * minNum + 1, 10);
						break;
					case 2:
						return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
						break;
					default:
						return 0;
						break;
				}
			},
			//开始游戏
			start() {
				this.num = 0;
				this.status = 1;
				for (var i = 1; i <= this.size; i++) {
					for (var j = 1; j <= this.size; j++) {
						this.box[i * 1000 + j] = true;
						this.npc[i * 1000 + j] = false;
					}
				}
				this.show = true;
				this.tin = '重新开始'

				//初始化敌人位置(让敌人在地图中间出生)
				this.npc[this.randomNum((this.size/2) - 1, (this.size/2) + 1) * 1000 + this.randomNum((this.size/2)-1, (this.size/2) + 1)] = true;
				this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
			},
			//点击生成障碍
			click(e) {
				//未开始游戏，无法点击
				if (this.status == 0) {
					return;
				}
				//该位置已有障碍
				if (this.box[e] == false) {
					return;
				}
				this.num = this.num + 1;
				var y = [-1, 1];
				var x = [-1, 1];
				var y_no = Math.floor(Math.random() * 2); //(随机获取移动方向：0 1 )
				var x_no = Math.floor(Math.random() * 2); //(随机获取移动方向：0 1 )
				//遍历获取npc位置
				for (var i = 1; i <= this.size; i++) {
					for (var j = 1; j <= this.size; j++) {
						//找到npc位置
						if (this.npc[i * 1000 + j] == true) {

							//障碍生成
							this.box[e] = false;

							//npc移动
							//如果碰到障碍
							if (this.box[(i + y[y_no]) * 1000 + (j + x[x_no])] == false) {

								//另辟蹊径
								for (var k = 0; k < 2; k++) {
									for (var l = 0; l < 2; l++) {
										if (this.box[(i + y[k]) * 1000 + (j + x[l])] != false) {
											//npc移动
											this.npc[i * 1000 + j] = false;
											this.npc[(i + y[k]) * 1000 + (j + x[l])] = true;

											this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
											return;
										}
									}
								}
								this.tin = '游戏获胜,再来一局';
								this.status = 0;
								return;
							} else {
								//npc移动
								this.npc[i * 1000 + j] = false;
								this.npc[(i + y[y_no]) * 1000 + (j + x[x_no])] = true;

								this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
								return;
							}
						}
					}
				}
				this.tin = '游戏失败,再来一局';
				this.status = 0;
				return;
			}
		}
	}
</script>

<style>
	* {
		box-sizing: border-box;
	}

	.index {
		margin-top: 30px;
		border-radius: 30px;
		background-color: #f0f5ff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
	}

	.btn {
		width: 97%;
		font-size: 50px;
		font-weight: 600;
		float: center;
		display: flex;
		justify-content: center;
		margin: 5px auto;
		border-radius: 15px;
		color: #40a9ff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
	}

	.index h4 {
		font-size: 50px;
		float: center;
		display: flex;
		justify-content: center;
		margin: 10px auto;
		color: #1890ff;
		transition: all 0.4s cubic-bezier(0.25, 1.0, 0.25, 1.0);
	}

	.box-card-open {
		width: 80px;
		height: 80px;
		margin: 4px;
		border-radius: 15px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
		background-color: #ffffff;
		transition: all 0.4s cubic-bezier(0.25, 1.0, 0.25, 1.0);
	}

	.box-card-close {
		width: 80px;
		height: 80px;
		margin: 4px;
		border-radius: 15px;
		-webkit-filter: drop-shadow(0 0 5px #bae7ff);
		filter: drop-shadow(0 0 5px #bae7ff);
		background-color: #40a9ff;
		transition: all 0.4s cubic-bezier(0.25, 1.0, 0.25, 1.0);
	}

	.npc-card-open {
		width: 80px;
		height: 80px;
		border-radius: 15px;
		-webkit-filter: drop-shadow(0 0 5px #feffe6);
		filter: drop-shadow(0 0 5px #feffe6);
		background: conic-gradient(#9ED110, #50B517, #179067, #476EAF, #9f49ac, #CC42A2, #FF3BA7, #FF5800, #FF8100, #FEAC00, #FFCC00, #EDE604);
		float: center;
		display: flex;
		justify-content: center;
		margin: 0 auto;
		transition: all 0.4s cubic-bezier(0.25, 1.0, 0.25, 1.0);
	}

	.npc-card-close {
		width: 0;
		height: 0;
		float: center;
		display: flex;
		justify-content: center;
		margin: 0 auto;
	}

	.box {
		width: 900px;
		float: center;
		display: flex;
		margin: 0 auto;
		justify-content: center;
	}
</style>
